<template>
  <el-container>

  <el-row>
     <el-row :gutter="20" >
     <el-col :span="20" >
       <div class="bg-2">标题</div>
     </el-col>
     </el-row>
      <el-row  :gutter="20" >
        <el-col :span="6" ><div class="bg-6">书籍</div></el-col>
        <el-col :span="3">
          <el-row>
            <el-col><div class="bg-1">作者：</div></el-col>
          </el-row>
          <el-row>
          <el-col><div class="bg-1">出版社：</div></el-col>
          </el-row>
          <el-row>
            <el-col><div class="bg-1">字数：</div></el-col>
          </el-row>
          <el-row>
            <el-col><div class="bg-1">简介：</div></el-col>
          </el-row>
          <el-row>
            <el-col><div class="bg-1">时间：</div></el-col>
          </el-row>
          <el-row>
            <el-col><div class="bg-1">热度：</div></el-col>
           </el-row>
        </el-col>
      </el-row>
    <el-row  :gutter="20">
      <el-col :span="20"><div class="bg">书籍详情</div></el-col>
    </el-row>
    <el-row  :gutter="20">
      <el-col :span="6"><div class="bg-3">我要交换</div></el-col>
      <el-col :span="6"><div class="bg-3">立即购买</div></el-col>
    </el-row>
    <el-row  :gutter="20">
      <el-col :span="6"><div class="bg-3">读者评价</div></el-col>
      <el-col :span="6" ><div class="bg-4">评价:</div></el-col>
    </el-row>
    <el-row  :gutter="20">
      <el-col :span="6"  :offset="18"><div class="bg-5">提交评价</div></el-col>
    </el-row>

  </el-row>
  </el-container>

</template>

<script>
export default {
name: "details.vue"
}
</script>

<style scoped>

.bg {
  background-color: #B3C0D1;
  color: #333;
  min-height: 100px;
  min-width: 1200px;
}
.el-row {
  color: #B3C0D1;
  margin-bottom: 5px;
  margin-bottom: 5PX;
}
.el-col {
  border-radius: 4px;
}
.bg-6 {
  background:#B3C0D1;
  color: #333;
  min-height: 250px;
  min-width: 100px;
}
.bg-1{
  background-color: #B3C0D1;
  color: #333;
  text-align: left;
  min-height: 37.5px;
  min-width: 895px;
}
.bg-2{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  min-height: 100px;
  min-width: 1200px;
}
.bg-3{
  background-color: #B3C0D1;
  color: #333;
  min-height: 50px;
  min-width: 30px;
}
.bg-4 {
  background-color: #B3C0D1;
  color: #333;
  text-align: left;
  min-height: 50px;
  min-width: 800px;
}
.bg-5 {
  background-color: #B3C0D1;
  color: #333;
  min-height: 50px;
  min-width: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-container{
  background-color: #600000;
  text-align: center;
}


</style>
